import 'package:flutter/material.dart';

//Flutter 富文本
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: ScaleFadePageView(),
    );
  }
}

// 🌀 案例 3：缩放淡入淡出效果
// 实现页面在切换时的缩放和透明度变化效果。
class ScaleFadePageView extends StatefulWidget {
  @override
  _ScaleFadePageViewState createState() => _ScaleFadePageViewState();
}

class _ScaleFadePageViewState extends State<ScaleFadePageView> {
  final PageController _pageController = PageController(viewportFraction: 0.8);
  double _currentPage = 0.0;

  @override
  void initState() {
    super.initState();
    _pageController.addListener(() {
      setState(() {
        _currentPage = _pageController.page!;
      });
    });
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('缩放淡入淡出效果')),
      body: PageView.builder(
        controller: _pageController,
        itemCount: 5,
        itemBuilder: (context, index) {
          final double relativePosition = index - _currentPage;
          final double absPosition = relativePosition.abs();

          // 计算缩放比例：中间页面最大，两边逐渐变小
          final double scale = absPosition < 1.0
              ? 1.0 - (absPosition * 0.2)
              : 0.8;

          // 计算透明度：中间页面最清晰，两边逐渐变淡
          final double opacity = absPosition < 1.0
              ? 1.0 - (absPosition * 0.5)
              : 0.5;

          return AnimatedBuilder(
            animation: _pageController,
            builder: (context, child) {
              return Transform.scale(
                scale: scale,
                child: Opacity(
                  opacity: opacity,
                  child: Container(
                    margin: EdgeInsets.symmetric(vertical: 30, horizontal: 10),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                      gradient: LinearGradient(
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                        colors: [Colors.purple[400]!, Colors.pink[300]!],
                      ),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black26,
                          blurRadius: 15,
                          offset: Offset(0, 6),
                        ),
                      ],
                    ),
                    child: Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Icon(Icons.star, size: 60, color: Colors.white),
                          SizedBox(height: 20),
                          Text(
                            '页面 ${index + 1}',
                            style: TextStyle(
                              fontSize: 24,
                              fontWeight: FontWeight.bold,
                              color: Colors.white,
                            ),
                          ),
                          SizedBox(height: 10),
                          Text(
                            '缩放: ${scale.toStringAsFixed(2)}\n透明度: ${opacity.toStringAsFixed(2)}',
                            textAlign: TextAlign.center,
                            style: TextStyle(color: Colors.white70),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}
